<template>
    <div>
      <login-top middleTop="注册哔哩哔哩">
        <div slot="right" style="font-size: 3vw;" @click="$router.push('/login')">已有账号，点击登录</div>
      </login-top>
      <login-text @inputChange="res => name = res" rule="^.{6,16}$" label="姓名" style="padding: 4vw 0" placeholder="请输入姓名"></login-text>
      <login-text @inputChange="res => username = res" rule="^.{6,16}$" label="账号" placeholder="请输入账号"></login-text>
      <login-text @inputChange="res => password = res" rule="^.{6,16}$" label="密码" type="password" placeholder="请输入密码"></login-text>
      <login-btn btntext="注册" @registerSubmit="registerSubmit"></login-btn>
    </div>
</template>

<script>
  import LoginTop from '@/components/common/LoginTop.vue'
  import LoginText from '@/components/common/LoginText.vue'
  import LoginBtn from '@/components/common/LoginBtn.vue'
    export default {
        components:{
          LoginTop,
          LoginText,
          LoginBtn
        },
        name: "register",
        data() {
            return {
              name:'',
              username:'',
              password:''
            }
        },
        methods: {
          async registerSubmit(){
            let rulg = /^.{6,16}$/
            let model = {
              name:this.name,
              username:this.username,
              password:this.password
            }
            if (rulg.test(this.username) && rulg.test( this.name) && rulg.test(this.password) ) {
              const res = await this.$http.post('/register',model)
              this.$msg.fail(res.data.msg)
              localStorage.setItem('id',res.data.id)
              localStorage.setItem('token',res.data.objtoken)
              setTimeout(() =>{
                this.$router.push('/userinfo')
              },1000)
            }else{
              this.$msg.fail("格式不正确")
            }
          },
        },
      mounted() {
      }
    }
</script>

<style scoped>

</style>
